<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>demom</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#div1{
		width: 200px;
		height: 200px;
		background: orange;
		position: relative;
		margin-left:5px;
	}

	#div2{
		width: 100px;
		height: 100px;
		background: blue;
		margin:20px;
		border:10px solid red;

	}

</style>
</head>

<body>

	<div id="div1">
		<div id="div2"></div>
	</div>

<script type="text/javascript">

	$(function(){
			//alert( $('#div2').css('left') )  //会显示出当前的left值为 auto

			//alert($("#div2").offset().left)  //#div2的最左边（连同边框计算在内）距离视图左侧的距离，margin算在内

		//直接获取当前元素上：距离第一个有定位父节点的距离，margin算在内。因为父节点的关系，所以存在负数
			//alert($("#div2").position().top)  
		//#div2网上寻找一个有定位的父节点，没有就往上继续找，最终没有就会找到html节点
			$("#div2").offsetParent().css("background",'yellow')


	})




</script>


</body>

</html>